<template>
  <div class="not-found-container">
    <div class="not-found-content">
      <div class="error-illustration">
        <el-icon><Search /></el-icon>
      </div>
      <div class="error-code">404</div>
      <h1 class="error-title">页面未找到</h1>
      <p class="error-description">抱歉，您访问的页面不存在或已被移除</p>
      
      <div class="action-buttons">
        <el-button 
          type="primary" 
          size="large" 
          @click="goBack"
          class="home-button"
        >
          <el-icon><House /></el-icon>
          返回首页
        </el-button>
        
        <el-button 
          plain
          size="large" 
          @click="goBackward"
          class="back-button"
        >
          <el-icon><ArrowLeft /></el-icon>
          返回上一页
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { House, ArrowLeft, Search } from '@element-plus/icons-vue'

const router = useRouter()

const goBack = () => {
  router.push('/')
}

const goBackward = () => {
  router.go(-1)
}
</script>

<style scoped>
.not-found-container {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 2rem;
}

.not-found-content {
  text-align: center;
  color: #374151;
  max-width: 500px;
}

.error-illustration {
  margin-bottom: 2rem;
}

.error-illustration .el-icon {
  font-size: 6rem;
  color: #e5e7eb;
}

.error-code {
  font-size: 4rem;
  font-weight: 300;
  color: #9ca3af;
  margin-bottom: 1rem;
  letter-spacing: 2px;
}

.error-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
}

.error-description {
  font-size: 1.1rem;
  color: #6b7280;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.home-button {
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
}

.back-button {
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: #6b7280;
  border-color: #e5e7eb;
}

.back-button:hover {
  color: #374151;
  border-color: #d1d5db;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .error-illustration .el-icon {
    font-size: 4rem;
  }
  
  .error-code {
    font-size: 3rem;
  }
  
  .error-title {
    font-size: 1.5rem;
  }
  
  .error-description {
    font-size: 1rem;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .home-button, .back-button {
    width: 100%;
    max-width: 250px;
  }
}

@media (max-width: 480px) {
  .not-found-container {
    padding: 1rem;
  }
  
  .error-code {
    font-size: 2.5rem;
  }
  
  .error-title {
    font-size: 1.25rem;
  }
}
</style>